<template>
  <div>
    <div class="acea-row row-middle border_bottom pb-24" v-if="psInfo">
<!--      <div class="avatar mr20"><img :src="psInfo.faceUrl"></div>-->
      <div class="dashboard-workplace-header-tip">
<!--        <p class="dashboard-workplace-header-tip-title" v-text="psInfo.userName || '-'"></p>-->
        <div class="dashboard-workplace-header-tip-desc" style="margin-top: 10px;">
          <span class="dashboard-workplace-header-tip-desc-sp pb-1">投诉人姓名: {{ psInfo.reflectorName}}</span>
          <span class="dashboard-workplace-header-tip-desc-sp pb-1">投诉人手机号: {{ psInfo.reflectorMobile }}</span>
        </div>
        <div class="dashboard-workplace-header-tip-desc" style="width: 100%;">
          <span class="dashboard-workplace-header-tip-desc-sp pb-1">欠薪负责人姓名: {{ psInfo.salaryName}}</span>
          <span class="dashboard-workplace-header-tip-desc-sp pb-1">欠薪负责人手机号: {{ psInfo.salaryMobile }}</span>
          <span class="dashboard-workplace-header-tip-desc-sp pb-1">欠薪人数: {{ psInfo.salaryCount}}人</span>
          <span class="dashboard-workplace-header-tip-desc-sp pb-1">欠薪金额: {{ psInfo.salaryAmount }}元</span>
        </div>
<!--        <div v-if="!depId || (depId && appeal === 1)">-->
          <!-- 初次派件都可以操作，即depID==null
          当depId不为0想再次派件，需要有申诉，即depId!=null&appeal=1 -->
<!--        </div>-->
      </div>
    </div>
    <el-row align="middle" :gutter="10" class="ivu-mt mt20">
      <el-col :span="4">
        <el-menu
          default-active="0"
          class="el-menu-vertical-demo"
          @select="changeType"
        >
          <el-menu-item :name="item.val" v-for="(item, index) in list" :key="index" :index="item.val">
            <span slot="title">{{item.label}}</span>
          </el-menu-item >
        </el-menu>
      </el-col>
      <el-col :span="20">
        <el-form ref="pram" :model="pram" :rules="rules" label-width="100px" @submit.native.prevent>
          <template v-if="tableFrom.type === '0'">
            <el-form-item label="投诉领域：">
              <div class="item-line" v-if="psInfo.type==1">⼯程建设领域</div>
              <div class="item-line" v-else>非⼯程建设领域</div>
            </el-form-item>
            <el-form-item label="拖欠工资项目名称：" class="mb15"  v-if="psInfo.type==1" label-width="160">
              <div class="item-line">{{psInfo. projectName}}</div>
            </el-form-item>
            <el-form-item label="是否签订劳动合同：" class="mb15" label-width="160">
              <div class="item-line" v-if="psInfo.isContract==1">是</div>
              <div class="item-line" v-else-if="psInfo.isContract==2">否</div>
            </el-form-item>
            <el-form-item label="建设单位名称：" class="mb15" v-if="psInfo.type==1" label-width="140">
              <div class="item-line">{{psInfo. unitName}}</div>
            </el-form-item>
            <el-form-item label="施工单位名称：" class="mb15" v-if="psInfo.type==1" label-width="140">
              <div class="item-line">{{psInfo. constructionName}}</div>
            </el-form-item>
            <el-form-item label="分包单位名称：" class="mb15" v-if="psInfo.type==1" label-width="140">
              <div class="item-line">{{psInfo. subpackageName}}</div>
            </el-form-item>
            <el-form-item label="拖欠工资项目名称：" class="mb15"  v-if="psInfo.type==1" label-width="160">
              <div class="item-line">{{psInfo. projectName}}</div>
            </el-form-item>
            <el-form-item label="用人单位名称：" class="mb15" v-if="psInfo.type==2" label-width="160">
              <div class="item-line">{{psInfo. unitName}}</div>
            </el-form-item>
            <el-form-item label="基本情况：">
              <el-input v-model="psInfo.information" type="textarea" :rows="4" placeholder="基本情况" class="textarea-no-border" readonly/>
            </el-form-item>
          </template>
          <template v-if="tableFrom.type === '1'">
            <el-form-item label="经纬度：" class="mb20">
              <div class="item-line">{{psInfo.longitude}}，{{psInfo.latitude}}</div>
            </el-form-item>
            <el-form-item label="用工所在地：" class="mb20">
              <div class="item-line">{{psInfo.actualLocation}}</div>
            </el-form-item>
            <el-form-item label="详细地址：" class="mb20">
              <div class="item-line">{{psInfo.address}}</div>
            </el-form-item>
          </template>
          <template v-if="tableFrom.type === '2'">
            <el-row :gutter="24">
              <el-col :span="24">
                <template v-if="psInfo.picList">
                  <el-form-item :label="'图片('+psInfo.picList.length +'/6)：'">
                    <div class="acea-row">
                      <!-- <div
                        v-for="(item,index) in psInfo.advise.sliderImages"
                        :key="index"
                        class="pictrue mb10"
                        draggable="true"
                        @dragstart="handleDragStart($event, item)"
                        @dragover.prevent="handleDragOver($event, item)"
                        @dragenter="handleDragEnter($event, item)"
                        @dragend="handleDragEnd($event, item)"
                      > -->
                      <div
                        v-for="(item,index) in psInfo.picList"
                        :key="index"
                        class="pictrue mb10"
                        draggable="true"
                      >
                        <el-image
                          class="photo-el-image"
                          :src="item"
                          :preview-src-list="psInfo.picList"
                        />
                        <!--                      <img :src="item">-->
                        <!--                      <i v-if="!isDisabled" class="el-icon-error btndel" @click="handleRemove(index)"/>-->
                      </div>
                      <!-- <div v-if="pram.sliderImages.length<6 && !isDisabled" class="upLoadPicBox" @click="modalPicTap('2')">
                        <div class="upLoad">
                          <i class="el-icon-camera cameraIconfont" />
                        </div>
                      </div> -->
                    </div>
                  </el-form-item>
                </template>
                    <el-form-item label="图片：" v-else>
                      <div>暂无图片</div>
                    </el-form-item>
              </el-col>
            </el-row>
          </template>
          <template v-if="tableFrom.type === '3'">
            <el-form-item label="处理状态：">
              <div class="item-line" v-if="psInfo.status==4">处理中</div>
              <div class="item-line" v-if="psInfo.status==2">已办结</div>
              <div class="item-line" v-if="psInfo.status==3">已驳回</div>
              <div class="item-line" v-if="psInfo.status==1">待受理</div>
            </el-form-item>
              <el-form-item label="备注：">
<!--                <el-input v-model="psInfo.remark" type="textarea" :rows="1" placeholder="处理内容" class="textarea-no-border" readonly/>-->
                <!--              <div class="tips">立案受理填写立案相关说明 | 驳回填写驳回理由 | 结案填写结案反馈结果</div>-->
                <div class="textarea-no-border" v-if="psInfo.status==2">{{psInfo.remark}}</div>
                <div class="textarea-no-border" v-if="psInfo.status==3">{{psInfo.rejectRemark}}</div>
                <div class="textarea-no-border" v-if="psInfo.status==4">{{psInfo.handleRemark}}</div>
                <div class="textarea-no-border" v-if="psInfo.status==1">暂无</div>
              </el-form-item>
            <el-form-item>
<!--              <el-button type="primary" @click="handlerSubmit('pram')" v-hasPermi="['admin:advise:update:status']">更新</el-button>-->
              <el-button @click="close">取消</el-button>
            </el-form-item>
          </template>
        </el-form>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import * as roleApi from '@/api/role.js'
import { infobyconditionApi, topdetailApi, updateFormDep } from '@/api/user'
import {Debounce} from '@/utils/validate'
import {getFormById, getFormStatus, updateForm,getFormRemarkById} from "@/api/computer";
import store from '@/store'
import Cookies from 'js-cookie'
import { checkPermi } from '@/utils/permission'
export default {
  name: "PhotoDetails",
  props:{
    id: {
      type: Number,
      default: null
    },
    allTypeList: {
      type: Array,
    },
    allTermList: {
      type: Array,
    },
  },
  data() {
    return {
      JavaInfo: JSON.parse(Cookies.get("JavaInfo")),
      loading: false,
      isDisabled: this.$route.params.isDisabled==='1'?true:false,
      list: [
        { val: '0', label: '问题描述' },
        { val: '1', label: '详细地址' },
        { val: '2', label: '证据材料' },
        { val: '3', label: '处理结果' },
      ],
      tableFrom: {
        type : '0',
        userId : ''
      },
      pram: {
        status:null,
        id: 0,
      },
      rules: {
        status: [{ required: true, message: '请选择处理状态', trigger: ['blur', 'change'] }],
      },
      typeList:[],
      statusList:[],

      psInfo: {
        user:{},
        photo:{},
        faceUrl:'',
        userName:'',
        typeText:'',
        description:'',
        mobile:'',
        picList:[],
        video:'',
        remark:'',
        depId:null,
        appeal:null,
      },
      tipsText:'',

      //派件
      departmentList:[],
      termList:[],
      dialogVisible: false,//派件dialog
      dynamicValidateForm:{
        id:0,
        depId: '',
        termId:'',
      },

      //单位处理信息
      formRemark:{
        content:'',
        picList:[]
      }
    }
  },
  mounted(){
    if(this.id){
      this.initEditData()
      //this.initTypeList()
      this.changeType(this.tableFrom.type)
    }

    if(this.JavaInfo.roles !== 1){
      //主管单位
      this.list = this.list.filter(function(item){
        return item.val !== '3'
      })
    }
  },
  methods: {
    checkPermi,
    close() {
      this.$emit('hideEditDialog')
    },

    initEditData() {
      this.typeList = this.allTypeList
      this.termList = this.allTermList
      getFormRemarkById({id : this.id}).then(res => {
        this.psInfo = res
        if(res){
          this.pram.status = [0,1,2,5].indexOf(res.status)!==-1?null:res.status
          this.psInfo.picList=res.pdfUrl.length > 0 ? res.pdfUrl.split(',') : []
          console.log(this.psInfo.picList)
        }
      //this.pram = {...res.advise}
      })
    },
    initTypeList() {
      this.loading = true
      getFormStatus().then(res => {
        res = res.filter(function(item){
          return [3,4].indexOf(item.value)!==-1
        })
      this.statusList = res

      this.loading = false
      }).catch(res => {
        this.loading = false
      })
    },
    changeType(key) {
      this.tableFrom.type = key
      if(key === '3'){
        this.getFormRemarkInfo()
      }
    },
    getFormRemarkInfo() {
      this.loading = true
      getFormRemarkById( {id:this.id}).then(res => {
        if(res){
          this.formRemark.content = res.content
          this.formRemark.picList = res.url
        }
        this.loading = false
      }).catch(res => {
        this.loading = false
      })
    },

    handlerSubmit:Debounce(function(form) {
      this.$refs[form].validate(valid => {
        if (!valid || !this.id) return
        this.handlerEdit()
      })
    }),
    handlerEdit() {
      this.pram.id = this.id
      updateForm(this.pram).then(data => {
        this.$message.success('处理成功')
        this.$emit('hideEditDialog')
      })
    },

    //派件
    setAssign(row){
      if(row){
        //this.userIds = row.uid
        this.dynamicValidateForm.id = row.id
        //console.log(row)
        roleApi.getFormDepartment({id:this.dynamicValidateForm.id}).then(res => {
          this.departmentList = res;

          let arr = [];
          res.forEach(item=>{
            arr.push(item.id);
          })
          if(!arr.includes(Number.parseInt(this.dynamicValidateForm.depId))){
            this.$set(this.dynamicValidateForm,'depId','');
          }
        })

        let arr1 = [];
        this.termList.forEach(item=>{
          arr1.push(item.id);
        })
        if(!arr1.includes(Number.parseInt(this.dynamicValidateForm.termId))){
          this.$set(this.dynamicValidateForm,'termId','');
        }
        this.dynamicValidateForm.depId = row.depId?Number(row.depId):''
        this.dynamicValidateForm.termId = row.termId?Number(row.termId):''
      }else{
        this.dynamicValidateForm.id = 0
        this.dynamicValidateForm.depId = ''
        this.dynamicValidateForm.termId = ''
      }
      //if (this.multipleSelectionAll.length === 0 && !row) return this.$message.warning('请选择要设置的用户')
      this.dialogVisible = true
    },
    submitForm(formName) {
      // let data = [];
      // if(!this.userIds){
      //   if(this.multipleSelectionAll.length){
      //     this.multipleSelectionAll.map((item) => {
      //       data.push(item.uid)
      //     });
      //     this.userIds = data.join(',');
      //   }
      // }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          updateFormDep({termId:this.dynamicValidateForm.termId, depId: this.dynamicValidateForm.depId, id: this.dynamicValidateForm.id}).then(res => {
            this.$message.success('派件成功')
            this.loading = false
            this.Close()

            this.initEditData()
          }).catch(() => {
            this.loading = false
          })
        } else {
          return false;
        }
      });
    },
    Close() {
      this.dialogVisible = false
      this.$refs['dynamicValidateForm'].resetFields();
    },

    //以下方法已弃用
    handleRemove (i) {
      this.pram.sliderImages.splice(i, 1)
    },
    handleRemoveVideo () {
      this.pram.video = ''
    },
    // 点击商品图
    modalPicTap (tit, num, i,status) {
      const _this = this;
      if(_this.isDisabled) return;
      this.$modalUpload(function(img) {
        if(tit==='2'&& !num){
          if(img.length>6) return this.$message.warning("最多选择6张图片！");
          if(img.length + _this.pram.sliderImages.length > 6) return this.$message.warning("最多选择6张图片！");
          img.map((item) => {
            _this.pram.sliderImages.push(item.attDir)
          });
        }
      },tit, 'content')
    },

    // 移动
    handleDragStart (e, item) {
      if(!this.isDisabled) this.dragging = item;
    },
    handleDragEnd (e, item) {
      if(!this.isDisabled) this.dragging = null
    },
    handleDragOver (e) {
      if(!this.isDisabled) e.dataTransfer.dropEffect = 'move'
    },
    handleDragEnter (e, item) {
      if(!this.isDisabled){
        e.dataTransfer.effectAllowed = 'move'
        if (item === this.dragging) {
          return
        }
        const newItems = [...this.pram.sliderImages]
        const src = newItems.indexOf(this.dragging)
        const dst = newItems.indexOf(item)
        newItems.splice(dst, 0, ...newItems.splice(src, 1))
        this.pram.sliderImages = newItems;
      }
    },
  }
}
</script>
<style scoped lang="scss">
.textarea-no-border{
  ::v-deep.el-textarea__inner{
    border:none!important;
    padding:7px 0;
    font-family: 'arial,sans-serif';
    font-size:14px;
  }
}
.avatar{
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  margin-left: 18px;
  img{
    width: 100%;
    height: 100%;
  }
}
.dashboard-workplace {
  &-header {
    &-avatar {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      margin-right: 16px;
      font-weight: 600;
    }

    &-tip {
      width: 95%;
      display: inline-block;
      vertical-align: middle;
      margin-top: -12px;
      &-title {
        font-size: 13px;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.85);
        line-height: 18px;
        padding: 10px 0 10px;
      }

      &-desc {
        &-sp {
          width: 24%;
          color: #17233D;
          font-size: 13px;
          display: inline-block;
        }
      }
    }

    &-extra {
      .ivu-col {
        p {
          text-align: right;
        }

        p:first-child {
          span:first-child {
            margin-right: 4px;
          }

          span:last-child {
            color: #808695;
          }
        }

        p:last-child {
          font-size: 22px;
        }
      }
    }
  }
}
.pb-1{
  padding-bottom: 10px;
}
.mr20{
  margin: 0 20px;
}
.border_bottom{
  border-bottom: 1px solid #E7EAEC;
}
.pb-24{
  padding-bottom: 24px;
}
.title-desc{
  font-size:16px;
  color:#087fff;
  font-weight:bold;
  margin:0 0 20px 10px;
}

.pictrue{
  width: 120px;
  height: 120px;
  border: 1px dotted rgba(0,0,0,0.1);
  margin-right: 10px;
  position: relative;
  cursor: pointer;
  .photo-el-image{
    width: 100%;
    height: 100%;
  }
  img{
    width: 100%;
    height: 100%;
  }
  video{
    width: 100%;
    height: 100%;
  }
}
.videoBox{
  width: 300px;
  height: 180px;
  //border: 1px dotted rgba(0,0,0,0.1);
  margin-right: 10px;
  position: relative;
  cursor: pointer;
  border-radius:15px;
  img{
    width: 100%;
    height: 100%;
  }
  video{
    width: 100%;
    height: 100%;
    border-radius:15px;
  }
}
.btndel{
  position: absolute;
  z-index: 1;
  width :20px !important;
  height: 20px !important;
  font-size:20px;
  left: 92px;
  top: -4px;
}
.video-btndel{
  left: 282px;
  top: 1px;
}
.tips{
  color: #c0c4cc;
  font-size:14px;
}
</style>
